<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <el-form label-width="200px" v-if="dataInfo">
          <div class="tit">
            <h2>基础信息</h2>
            <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
          </div>
          <el-row>
            <el-form-item label="模板名称:">
              <span>{{ dataInfo.modelName }}</span>
            </el-form-item>
            <el-form-item label="商户:">
              <span>{{ dataInfo.businessName }}</span>
            </el-form-item>
          </el-row>

          <div class="tit">
            <h2>可售时间</h2>
          </div>
          <el-row >
            <el-table :data="list" style="width:fit-content;max-width:fit-content;" border >
              <el-table-column type="index" label="序号" align="center" width="100px">
              </el-table-column>
              <el-table-column prop="beginHours" label="开始时间"  align="center" width="200">
              </el-table-column>
              <el-table-column prop="endHours" label="结束时间" align="center" width="200">
              </el-table-column>
              <el-table-column prop="estimateTime" label="最快到达时间" align="center" width="200">
                  <template slot-scope="scope">
                    {{ scope.row.estimateTime}}{{ formatTimeUnit(scope.row.timeUnit) }}
                  </template>
              </el-table-column>
              <el-table-column prop="deliveryTime" label="可送时间段" align="center" width="200">
              </el-table-column>
              <el-table-column prop="businessRemindTime" label="商户提醒时间(分)" align="center" width="140">
              </el-table-column>
              <el-table-column prop="waiterRemindTime" label="服务员提醒时间(分)" align="center" width="140">
              </el-table-column>
            </el-table>
          </el-row>
        </el-form>
      </div>
    </div>
  </template>

  <script>
    import TimeTemplateApi from '@/api/goods/timeTemplate';

  export default {
    data() {
      return {
        dataInfo: {},
        list:[],
      };
    },
    computed: {
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        TimeTemplateApi.getTimeTemplateInfo({ id: this.$route.query.id }).then(res => {
          this.dataInfo = res.data
          this.list = this.dataInfo.relations
        })
      },
      formatTimeUnit(cell){
        if(cell==1){
          return "分钟"
        }else if(cell==2){
          return "时"
        }else{
          return ""
        }
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({ path: '/goods/timeTemplateManagement' })
      }
    },

  }

  </script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

  <style lang="scss" scoped>
  .img-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 3px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;

    .el-image{
      width: 100%;
      &::v-deep img{
        height:auto
      }
    }
  }
  </style>
